<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<html>

  <head>
    <title>连接线类型</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">

     <script src="js/cytoscape.min.js"></script> 

    <!-- for testing with local version of cytoscape.js -->
    <!--<script src="../cytoscape.js/build/cytoscape.js"></script>-->

    <style>
      body {
        font-family: helvetica, sans-serif;
        font-size: 14px;
      }
      #cy {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 999;
      }
      h1 {
        opacity: 0.5;
        font-size: 1em;
      }
    </style>

    <script>
      document.addEventListener('DOMContentLoaded', function(){
        var cy = window.cy = cytoscape({
          container: document.getElementById('cy'),
          boxSelectionEnabled: false,
          autounselectify: true,
          layout: {
            name: 'grid',
            cols: 4,
            sort: function( a, b ){
              if( a.id() < b.id() ){
                return -1;
              } else if( a.id() > b.id() ){
                return 1;
              } else {
                return 0;
              }
            }
          },
          style: [
            {
              selector: 'node',
              style: {
                'height': 40,
                'width': 40,
                'background-color': '#333',
                'label': 'data(type)',
                'text-valign': 'center',
                'text-halign': 'left'
              }
            },
            {
              selector: 'edge',
              style: {
                'width': 3,
                'opacity': 0.666,
                'line-color': '#888'
              }
            },
            {
              selector: 'edge.bezier',
              style: {
                'curve-style': 'bezier',
                'control-point-step-size': 40
              }
            },
            {
              selector: 'edge.unbundled-bezier',
              style: {
                'curve-style': 'unbundled-bezier',
                'control-point-distances': 120,
                'control-point-weights': 0.1
              }
            },
            {
              selector: 'edge.multi-unbundled-bezier',
              style: {
                'curve-style': 'unbundled-bezier',
                'control-point-distances': '40 -40',
                'control-point-weights': '0.25 0.75'
              }
            },
            {
              selector: 'edge.haystack',
              style: {
                'curve-style': 'haystack',
                'haystack-radius': 0.5
              }
            },
            {
              selector: 'edge.segments',
              style: {
                'curve-style': 'segments',
                'segment-distances': '40 -40',
                'segment-weights': '0.25 0.75'
              }
            }
          ],
          elements: [
            { data: { id: 'n01', type: 'bezier' } },
            { data: { id: 'n02' } },
            { data: { id: 'e01', source: 'n01', target: 'n02' }, classes: 'bezier' },
            { data: { id: 'e02', source: 'n01', target: 'n02' }, classes: 'bezier' },
            { data: { id: 'e03', source: 'n02', target: 'n01' }, classes: 'bezier' },
            { data: { id: 'n03', type: 'unbundled-bezier' } },
            { data: { id: 'n04' } },
            { data: { id: 'e04', source: 'n03', target: 'n04' }, classes: 'unbundled-bezier' },
            { data: { id: 'n05', type: 'unbundled-bezier (multiple)' } },
            { data: { id: 'n06' } },
            { data: { id: 'e05', source: 'n05', target: 'n06' }, classes: 'multi-unbundled-bezier' },
            { data: { id: 'n07', type: 'haystack' } },
            { data: { id: 'n08' } },
            { data: { id: 'e06', source: 'n08', target: 'n07' }, classes: 'haystack' },
            { data: { id: 'e07', source: 'n08', target: 'n07' }, classes: 'haystack' },
            { data: { id: 'e08', source: 'n08', target: 'n07' }, classes: 'haystack' },
            { data: { id: 'e09', source: 'n08', target: 'n07' }, classes: 'haystack' },
            { data: { id: 'n09', type: 'segments' } },
            { data: { id: 'n10' } },
            { data: { id: 'e10', source: 'n09', target: 'n10' }, classes: 'segments' },
          ]
        });
        //禁用放大和缩小、面板移动
    	cy.userZoomingEnabled(false);
    	cy.userPanningEnabled(false);
      });
    </script>
  </head>

  <body>
    <h1>Edge types demo</h1>

    <div id="cy"></div>

  </body>

</html>